<template>
  <div class="card">
    <div class="card-header">
      <h2 class="text-xl font-semibold text-gray-900 dark:text-white flex items-center">
        <BarChart3 class="w-6 h-6 mr-2 text-blue-600" />
        {{ t('stats.title') }}
      </h2>
    </div>
    
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4 md:gap-6">
      <!-- 网络信息 -->
      <div class="space-y-3">
        <h3 class="font-medium text-gray-900 dark:text-white flex items-center">
          <Globe class="w-5 h-5 mr-2 text-green-600" />
          {{ t('stats.network_info') }}
        </h3>
        <div class="space-y-2 text-sm">
          <div class="flex justify-between">
            <span class="text-gray-600 dark:text-gray-400">{{ t('stats.connection_status') }}:</span>
            <span class="font-medium text-green-600">{{ getLocalizedConnectionStatus(bandwidthStore.systemInfo?.connection_status) }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600 dark:text-gray-400">{{ t('stats.network_type') }}:</span>
            <span class="font-medium text-gray-900 dark:text-white">{{ bandwidthStore.systemInfo?.network_type || t('stats.unknown') }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600 dark:text-gray-400">{{ t('stats.ip_address') }}:</span>
            <span class="font-medium font-mono text-gray-900 dark:text-white">{{ bandwidthStore.systemInfo?.ip_address || t('stats.unknown') }}</span>
          </div>
        </div>
      </div>
      
      <!-- 性能统计 -->
      <div class="space-y-3">
        <h3 class="font-medium text-gray-900 dark:text-white flex items-center">
          <TrendingUp class="w-5 h-5 mr-2 text-blue-600" />
          {{ t('stats.performance_stats') }}
        </h3>
        <div class="space-y-2 text-sm">
          <div class="flex justify-between">
            <span class="text-gray-600 dark:text-gray-400">{{ t('stats.average_speed') }}:</span>
            <span class="font-medium text-gray-900 dark:text-white">{{ (bandwidthStore.networkStats?.average_speed || 0).toFixed(2) }} Mbps</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600 dark:text-gray-400">{{ t('stats.peak_speed') }}:</span>
            <span class="font-medium text-gray-900 dark:text-white">{{ (bandwidthStore.networkStats?.peak_speed || 0).toFixed(2) }} Mbps</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600 dark:text-gray-400">{{ t('stats.efficiency') }}:</span>
            <span class="font-medium text-green-600">{{ (bandwidthStore.networkStats?.efficiency || 0).toFixed(1) }}%</span>
          </div>
        </div>
      </div>
      
      <!-- 系统资源 -->
      <div class="space-y-3">
        <h3 class="font-medium text-gray-900 dark:text-white flex items-center">
          <Cpu class="w-5 h-5 mr-2 text-purple-600" />
          {{ t('stats.system_resources') }}
        </h3>
        <div class="space-y-2 text-sm">
          <div class="flex justify-between">
            <span class="text-gray-600 dark:text-gray-400">{{ t('stats.cpu_usage') }}:</span>
            <span class="font-medium text-gray-900 dark:text-white">{{ (bandwidthStore.systemInfo?.cpu_usage || 0).toFixed(1) }}%</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600 dark:text-gray-400">{{ t('stats.memory_usage') }}:</span>
            <span class="font-medium text-gray-900 dark:text-white">{{ (bandwidthStore.systemInfo?.memory_usage || 0).toFixed(1) }}%</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600 dark:text-gray-400">{{ t('stats.runtime') }}:</span>
            <span class="font-medium text-gray-900 dark:text-white">{{ bandwidthStore.formattedDuration }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 历史记录 -->
    <div class="mt-6">
      <h3 class="font-medium text-gray-900 dark:text-white mb-4 flex items-center">
        <Clock class="w-5 h-5 mr-2 text-indigo-600" />
        {{ t('stats.history') }}
      </h3>
      <div class="bg-gray-50 dark:bg-[#141414] rounded-lg p-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">{{ t('stats.today_stats') }}</h4>
            <div class="space-y-2 text-sm">
              <div class="flex justify-between">
                <span class="text-gray-600 dark:text-gray-400">{{ t('stats.total_consumed') }}:</span>
                <span class="font-medium text-gray-900 dark:text-white">{{ bandwidthStore.formattedBytesConsumed }}</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600 dark:text-gray-400">{{ t('stats.run_count') }}:</span>
                <span class="font-medium text-gray-900 dark:text-white">{{ bandwidthStore.networkStats?.run_count || 0 }} {{ t('stats.times') }}</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600 dark:text-gray-400">{{ t('stats.avg_session_time') }}:</span>
                <span class="font-medium text-gray-900 dark:text-white">{{ bandwidthStore.networkStats?.avg_session_time || 0 }} {{ t('stats.minutes') }}</span>
              </div>
            </div>
          </div>
          
          <div>
            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">{{ t('stats.weekly_stats') }}</h4>
            <div class="space-y-2 text-sm">
              <div class="flex justify-between">
                <span class="text-gray-600 dark:text-gray-400">{{ t('stats.total_runtime') }}:</span>
                <span class="font-medium text-gray-900 dark:text-white">{{ (bandwidthStore.networkStats?.weekly_run_time || 0).toFixed(1) }} {{ t('stats.hours') }}</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600 dark:text-gray-400">{{ t('stats.most_used_level') }}:</span>
                <span class="font-medium text-gray-900 dark:text-white">{{ getLevelName(bandwidthStore.currentLevel) }}</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600 dark:text-gray-400">{{ t('stats.total_data_usage') }}:</span>
                <span class="font-medium text-gray-900 dark:text-white">{{ (bandwidthStore.networkStats?.weekly_data_usage || 0).toFixed(1) }} GB</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { BarChart3, Globe, TrendingUp, Cpu, Clock } from 'lucide-vue-next'
import { useBandwidthStore } from '@/stores/bandwidth'
import { BandwidthLevel } from '@/types'
import { useI18n } from '@/composables/useI18n'

const bandwidthStore = useBandwidthStore()
const { t } = useI18n()

// 获取等级名称（国际化）
const getLevelName = (level: BandwidthLevel): string => {
  const levelKey = level.toLowerCase()
  return t(`levels.${levelKey}`)
}

// 获取国际化的连接状态
const getLocalizedConnectionStatus = (status?: string): string => {
  if (!status) return t('stats.unknown')
  
  // 将后端返回的中文状态转换为国际化键
  switch (status) {
    case '已连接':
      return t('status.connected')
    case '未连接':
      return t('status.disconnected')
    case '连接中':
      return t('status.loading')
    default:
      return status // 如果是其他状态，直接返回
  }
}
</script> 